<template>
  <div style="padding: 100px 0 0 550px;background-color:#f4f4f4">
  <div class="login_box">
    <h3 class="login_title_top">系统登录</h3>
    <p class="login_title">
      <span :class="isActiveIndex === 0 ? 'isActiveTitle' : ''" @click="accountLogin">账号登录</span><!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
      <span :class="isActiveIndex === 1 ? 'isActiveTitle' : ''" @click="smsLogin">短信登录</span>
    </p>
  <el-form v-if="isActive" :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px">
    <el-form-item prop="username">
      <el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:45%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
      <el-button type="warning" style="width:45%;" @click.native.prevent="gosettledIn">入驻</el-button>
      <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
    </el-form-item>
  </el-form>
    <el-form v-else ref="loginForm2" :model="loginForm2" label-width="0px">
      <el-form-item prop="phone">
        <el-input v-model="loginForm2.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="verifyCode">
        <el-input v-model="loginForm2.verifyCode" style="width:60%" placeholder="请输入验证码"></el-input>
        <el-button :disabled="!canClick" @click="sendMsg($event)">{{ getCodeText }}</el-button>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:45%;" @click.native.prevent="handleSubmit3" :loading="logining">登录</el-button>
        <el-button type="warning" style="width:45%;" @click.native.prevent="gosettledIn">入驻</el-button>
        <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script>
  import { requestLogin } from '../api/api';
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
        getCodeText:'获取验证码',
        canClick:true, // 验证码是否禁用
        totalTime:60,
        isActive: true, // 用于实现切换登录，作为判断
        isActiveIndex: 0,
        logining: false,
        ruleForm2: {
          username: 'kkk',
          password: '123',
          loginType: 0
        },
        loginForm2: {
          phone: '',
          verifyCode: '',
          loginType: 0
        },
        rules2: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    methods: {
      accountLogin() { // 账号登录
        this.isActive = true
        this.isActiveIndex = 0
      },
      smsLogin() { // 短信登录
        this.isActive = false
        this.isActiveIndex = 1
      },
      gosettledIn(){
        this.$router.push({path:'/shopRegister'});
      },
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            this.logining = true;
            this.$http.post("/logininfo/account",this.ruleForm2)
                .then(res=>{
                  console.log(res)
                  let { success, message, data } = res.data; //{sucess:fasle,message:xx,result{token:"xx“,user:{}}}
                  console.log(success,message,data)
                  if (!success) {
                    this.$message({
                      message: message,
                      type: 'error'
                    });
                  } else {
                    localStorage.setItem('user', JSON.stringify(data.logininfo)); //JSON.stringify转换为字符串
                    localStorage.setItem('token', data.token); //JSON.stringify转换为字符串
                    this.$router.push({ path: '/echarts' }); //跳转主页
                  }
                  this.logining = false;
                })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleSubmit3(ev) {
        var _this = this;
        this.$refs.loginForm2.validate((valid) => {
          if (valid) {
            this.logining = true;
            this.$http.post("/logininfo/smsCode",this.loginForm2)
                .then(res=>{
                  console.log(res)
                  let { success, message, data } = res.data; //{sucess:fasle,message:xx,result{token:"xx“,user:{}}}
                  console.log(success,message,data)
                  if (!success) {
                    this.$message({
                      message: message,
                      type: 'error'
                    });
                  } else {
                    localStorage.setItem('user', JSON.stringify(data.logininfo)); //JSON.stringify转换为字符串
                    localStorage.setItem('token', data.token); //JSON.stringify转换为字符串
                    this.$router.push({ path: '/echarts' }); //跳转主页
                  }
                  this.logining = false;
                })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      sendMsg(event){
        if(!this.loginForm2.phone){
          alert("手机号不能为空");
          return;
        }

        var param = {
          mobile: this.loginForm2.phone,
        };
        //4.发送ajax请求
        this.$http.post("/validateCode/sendLoginSmsCode",param).then(res=>{
          var ajaxResult = res.data;
          if(ajaxResult.success){
            if (!this.canClick) return
            this.canClick = false
            this.getCodeText = this.totalTime + 's后重新发送'
            let clock = window.setInterval(() => {
              this.totalTime--
              this.getCodeText = this.totalTime + 's后重新发送'
              if (this.totalTime < 0) {
                window.clearInterval(clock)
                this.getCodeText = '重新发送验证码'
                this.totalTime = 60
                this.canClick = true
              }
            },1000)
          }else{
            //4.3.发送失败：提示，恢复按钮
            alert("发送失败:"+ajaxResult.message);
          }
        })
      }   //函数结束
    }
  }

</script>

<style scoped>
  .login_box{
    width: 350px;
    height: 400px;
      /*margin: 10px auto;*/
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    padding: 35px 35px 15px 35px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  }
  .login_title_top{
    text-align: center;
    margin: 30px 30px 40px 30px;
    font-size: 24px;
    color: #666;
  }
  .login_title{
    text-align: center;
    margin: 30px 30px 40px 30px;
    font-size: 15px;
    color: #666;
  }
  .login_title span{
    margin: 0 20px 0 20px;
    cursor: pointer;
  }
  .login_title span:hover{
    color: #333;
    font-weight: bolder;
  }
  .isActiveTitle{
    color: #333;
    font-weight: bolder;
  }
  .login_agree{
    margin-left: 30px;
  }
  .login_btn{
    width: 100%;
    height: 50px;
    margin: 0 0 0 10px;
    background-color: #0cb95f;
    color: #fff;
  }
</style>
